<template>
    <el-card :style="execClass" :body-style="execBodyClass"
            :shadow="propJson.shadowType">
        <div v-if="!propJson.editFlag">
            <div class="itemClass" v-for="itemColInfo in propJson.list" >
                <component :is="itemColInfo.component" :propJson="itemColInfo.propJson" :commonParam="commonParam">
                    <template v-slot:[itemSlot.slotName]="slotProps" v-for="itemSlot in slotList">
                        <slot :name="itemSlot.slotName" :slotProps="slotProps"></slot>
                    </template>
                </component>
            </div>
        </div>

        <draggable v-if="propJson.editFlag"
                   :list="propJson.list"
                   animation="300"
                   :force-fallback="true"
                   :group="{name:'lowcode'}"
                   class="draggableClass"
                   item-key="id"
        >
            <template #item="{ element }">
                <div class="itemClass">
                    <component :is="element.component" :propJson="element.propJson" v-if="itemFlag" :commonParam="commonParam" @click.stop="" @dblclick.stop="changeComponentInfo(element)"/>
                    <component is="CloseCircleOutlined" class="closeClass" @click.stop="" @dblclick.stop="deleteComponent(element)"/>
                </div>
            </template>
        </draggable>
    </el-card>
</template>

<script>
import draggable from "vuedraggable";
import {deepCopy} from "@/utils/tagCreate";
import {getCommonParamObj} from "@/utils/commonParamUtil";

export default {
    name: "CommonCardComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            itemFlag: true
        }
    },
    components: {
        draggable
    },
    computed: {
        execClass() {
            let style = "";
            style += "width: 99.9%;"
            if (this.propJson.cardHeightType === "CUSTOM") {
                style += "height: " + this.propJson.cardHeight + ";";
            }
            return style;
        },
        execBodyClass() {
            let style = "";
            style += "padding: 0;";
            if (this.propJson.cardPaddingTop !== '') {
                style += "padding-top: " + this.propJson.cardPaddingTop + ";";
            }
            if (this.propJson.cardPaddingBottom !== '') {
                style += "padding-bottom: " + this.propJson.cardPaddingBottom + ";";
            }
            if (this.propJson.cardPaddingLeft !== '') {
                style += "padding-left: " + this.propJson.cardPaddingLeft + ";";
            }
            if (this.propJson.cardPaddingRight !== '') {
                style += "padding-right: " + this.propJson.cardPaddingRight + ";";
            }
            if (this.propJson.cardBodyWidth !== '') {
                style += "width: " + this.propJson.cardBodyWidth + ";";
            }
            return style
        },
        slotList() {
            let res = getCommonParamObj(this.commonParam, "templateSlotInfo")
            return res.variableValue;
        }
    },
    methods: {
        deleteComponent(element) {
            let colList = this.propJson.list
            // 获取当前列的LIST
            let index = -1;
            // 遍历当前列表，删除元素ID对应的数据
            for (let i = 0; i < colList.length; i++) {
                if (colList[i].id === element.id) {
                    index = i;
                }
            }
            if (index >= 0) {
                this.propJson.list.splice(index, 1);
            }
        },
        changeComponentInfo(element) {
            this.$store.state.currentDrawer = element.drawerComponent;
            this.$store.state.currentDrawerElementId = element.id;
            this.$store.state.currentDrawerTitle = element.title;
            let copyJson = deepCopy(element.propJson)
            this.$store.commit('changeLowCodeDrawerJsonInfo', copyJson)
            this.$store.state.isShowDrawer = true;
            this.$store.state.lowCodeComponentList = this.propJson.list
        },
    }
}
</script>

<style scoped lang="less">
.draggableContainer {
    width: 98%;
    height: 85vh;
    margin-left: 1%;
    padding-top: 0.2%;
    transition: box-shadow 0.3s ease;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
    //去除光标
    caret-color: transparent;
    overflow: auto;
    .draggableClass {
        width: 100%;
        height: 100%;
    }
    .itemClass {
        position: relative;
        transition: box-shadow 0.3s ease;
        margin-bottom: 0.3%;
        .closeClass {
            display: none;
        }
    }
    .itemClass:hover {
        cursor: pointer;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
        .closeClass {
            position: absolute;
            color: #e76565;
            top: 2px;
            right: 2px;
            display: block;
        }
    }
}

.draggableContainer:hover {
    cursor: pointer;
}

.cardClass {
    width: 100%;
    height: 10vh;
}
</style>